<template>
    <iframe class="report-content" :style="{height: '100%'}"></iframe>
</template>

<style lang="scss" scoped>
    .report-content {
        background: 0 0;
        border: 0;
        float: none;
        margin: 6px 0;
        max-width: none;
        outline: 0;
        padding: 0;
        position: static;
        width: 100%;
    }
</style>
<script>
    /**
     * 预览内容
     */
    export default {
        name: 'ReportContent',
        props: {
            content: {
                default: ''
            },
        },
        data() {
            return {
                contentHeight: 50,
            }
        },
        mounted() {
            this.setContent(this.content);
        },
        watch: {
            content(val) {
                this.setContent(val);
            }
        },
        methods: {
            setContent(val) {
                if (!this.$el.contentWindow) {
                    return;
                }
                let $d = this.$el.contentWindow.document;
                const head1 = '<style>body,html{height:100%;width:100%;padding:0;margin:0}#preview{width:100%;height:100%;padding:0;margin:0}#preview *{font-family:sans-serif;font-size:16px}</style>'
                const head2 = '<link id="syntaxhighlighter_css" rel="stylesheet" type="text/css" href="/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css"><script id="syntaxhighlighter_js" src="/ueditor/third-party/SyntaxHighlighter/shCore.js" type="text/javascript" defer/>'
                const head3 = '<style id="table">#preview table.noBorderTable caption,#preview table.noBorderTable td,#preview table.noBorderTable th{border:1px dashed #ddd!important}#preview table.sortEnabled tr.firstRow td,#preview table.sortEnabled tr.firstRow th{padding-right:20px;background-repeat:no-repeat;background-position:center right;background-image:url(/ueditor/themes/default/images/sortable.png)}#preview table.sortEnabled tr.firstRow td:hover,#preview table.sortEnabled tr.firstRow th:hover{background-color:#eee}#preview table{margin-bottom:10px;border-collapse:collapse;display:table}#preview td,#preview th{padding:5px 10px;border:1px solid #ddd}#preview caption{border:1px dashed #ddd;border-bottom:0;padding:3px;text-align:center}#preview th{border-top:1px solid #bbb;background:#f7f7f7}#preview table tr.firstRow th{border-top:2px solid #bbb;background:#f7f7f7}#preview tr.ue-table-interlace-color-single td{background:#fcfcfc}#preview tr.ue-table-interlace-color-double td{background:#f7faff}#preview td p{margin:0;padding:0;width:auto;height:auto}</style>'

                $A("head", $d).html(head1 + head2 + head3)
                $A("body", $d).attr("class", "view");
                $A("body", $d).html('<div id="preview" style="margin:8px">' + val + '/div');
                // this.$nextTick(() => {
                //     console.log($("tinymce").)
                //     this.contentHeight = $d.getElementById("tinymce").scrollHeight;
                // });
            }
        }
    }
</script>
